<template>
  <div id='tmpl'>
      <div id="postcomment">
          <h3>提交评论</h3>
          <p class="p"></p>
          <textarea placeholder="请输入您要评论的内容..." v-model="postcontent"></textarea>
          <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
      </div>
      
        <div id="list">
            <h3>评论列表</h3>
            <p class="p"></p>
            <div v-for="(item,index) in list" :key="index">
                <div class="title">
                    <span>第：{{index+1}}楼</span>
                    <span>用户：{{item.user_name}}</span>
                    <span>发表时间：{{item.add_time | datafmt("YYYY-MM-DD HH:mm:ss") }}</span>
                </div>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">{{item.content}}</li>
                </ul>
            </div>
      </div>
      <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
  </div>
</template>
<script>
import common from "../../kits/common.js";
import { Toast } from 'mint-ui';
export default {
    data(){
        return {
            pageindex:1,
            postcontent:"",
            list:[],
        };
    },
        props:["id"],
        created(){
                // this.list=[];
                this.getcommentlist(this.pageindex);
        },
        methods:{
            getmore(){
                this.pageindex++;
                this.getcommentlist(this.pageindex);
            },
            getcommentlist(pageindex){
                pageindex=pageindex || 1;
                var url=common.apidomain+"/api/getcomments/"+this.id+"?pageindex="+pageindex;
                this.$http.get(url).then(function(response){
                    var body=response.body;
                    if(body.status != 0){
                        Toast(body.message);
                        return;
                    };
                    this.list=this.list.concat(body.message);
                })
            },
            postcomment(){
                if(this.postcontent.trim().length<=0){
                    Toast("您输入的内容不能为空");
                    return;
                };
                var url=common.apidomain+"/api/postcomment/"+this.id;
                this.$http.post(url,{content:this.postcontent},{emulateJSON:true}).then(function(response){
                        Toast(response.body.message);
                        this.list=[{
"user_name": "匿名用户",
"add_time": new Date,
"content": this.postcontent
}].concat(this.list);
                        this.postcontent="";
                });
            }
        }
}
</script>
<style lang="css" scoped>
#postcomment,#list{
    padding:5px;
}
 .p{
    height: 1px;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.3);
}
.title{
    padding:5px;
    /*margin: 20px 15px 7px;*/
    color: #6d6d72;
    font-size: 15px;
    background-color: rgba(0,0,0,0.1);
	}
</style>